<template>
  <div class="rule-container">
    <div class="create-container">
      <el-button type="primary" @click="openDialog('add')">增加停车计费规则</el-button>

      <download-excel style="margin-left: 10px; display: inline-block;" class="export-excel-wrapper" :data="ruleList" :fields="json_fields" :header="title1" name="计费.xls">
        <el-button>导 出</el-button>
      </download-excel>

    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="ruleList" style="width: 100%">
        <el-table-column type="index" label="序号" />
        <el-table-column label="计费规则编号" prop="ruleNumber" />
        <el-table-column label="计费规则名称" prop="ruleName" />
        <el-table-column label="免费时长(分钟)" prop="freeDuration" />
        <el-table-column label="收费上线(元)" prop="chargeCeiling">
          <template #default="obj">
            {{ obj.row.chargeCeiling>0?obj.row.chargeCeiling:'--' }}
          </template>
        </el-table-column>
        <el-table-column label="计费方式">
          <template #default="scope">
            {{ chargetypeList(scope.row.chargeType) }}
          </template>
        </el-table-column>
        <el-table-column label="计费规则" prop="ruleNameView">
          <template #default="arr">
            {{ arr.row.chargeCeiling>0?arr.row.chargeCeiling:'--' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120">
          <template #default="{ row }">
            <el-button size="mini" type="text" @click="editOpen('edit',row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div>
      <el-dialog :title="title" :visible.sync="dialogVisible" width="35%" @close="closeDialog">
        <el-form ref="addForm" style="margin-left: 80px;margin-right: 80px;" :model="addForm" :rules="rules">
          <!-- 计费规则编号 -->
          <el-form-item prop="ruleNumber">
            <span>计费规则编号</span>
            <el-input v-model="addForm.ruleNumber" placeholder="请输入计费规则编号" />
          </el-form-item>
          <!-- 计费规则名称 -->
          <el-form-item prop="ruleName">
            <span>计费规则名称</span>
            <el-input v-model="addForm.ruleName" placeholder="请输入计费规则名称" />
          </el-form-item>
          <!-- 计费方式（全天收费） -->
          <el-form-item prop="chargeType">
            <span>计费方式（全天收费）</span>
            <el-radio-group v-model="addForm.chargeType" size="small" style="width: 100%; display: flex;">
              <el-radio border label="duration" style="width: 30%;">时长收费</el-radio>
              <el-radio border label="turn" style="width: 30%;">按次收费</el-radio>
              <el-radio border label="partition" style="width: 30%;">分段收费</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 免费时长 -->
          <div style="width: 100%;display: flex;justify-content: space-between;">
            <el-form-item style="width: 50%;" prop="freeDuration">
              <span style="display: block;">免费时长</span>
              <el-input v-model="addForm.freeDuration" type="text" style="width: 80%;margin-right: 5px;" placeholder="请输入免费时长" />
              <slot><span>分钟</span></slot>
            </el-form-item>
            <el-form-item prop="chargeCeiling" style="width: 50%;">
              <span style="display: block;">收费上限</span>
              <el-input v-model="addForm.chargeCeiling" type="text" style="width: 80%;margin-right: 5px;" placeholder="请输入收费上限" />
              <slot><span>元</span></slot>
            </el-form-item>
          </div>
          <!--  计费规则-->

          <div v-if="addForm.chargeType==='duration'">
            <span style="display: block;margin-bottom: 10px;">计费规则</span>
            <div style="width: 100%; display: flex; justify-content: space-between;">
              <el-form-item style="width: 33%;" prop="durationTime">
                <span style="margin-right: 5px;">每</span>
                <el-input-number v-model="addForm.durationTime" controls-position="right" :min="1" :max="10" placeholder="请输入" style="width: 80%;" @change="handleChange" />
              </el-form-item>
              <el-form-item style="width: 33%;" prop="durationType">
                <el-select v-model="addForm.durationType" placeholder="请选择" style="width: 90%;">
                  <el-option
                    v-for="item in timeList"
                    :key="item.text"
                    :label="item.name"
                    :value="item.text"
                  />
                </el-select>
              </el-form-item>
              <el-form-item style="width: 33%;" prop="durationPrice">
                <el-input v-model="addForm.durationPrice" type="text" placeholder="请输入" style="width: 80%;margin-right: 5px;" />
                <span>分钟</span>
              </el-form-item>

            </div>
          </div>
          <!-- 计费规则 -->

          <div v-else-if="addForm.chargeType==='turn'">
            <el-form-item prop="turnPrice">
              <span style="display: block;">计费规则</span>
              <div style="width: 100%;">
                <span style="margin-right: 5px;">每次</span>
                <el-input v-model="addForm.turnPrice" type="text" style="width:40%;margin-right: 5px;" placeholder="请输入金额" />
                <span>分钟</span>
              </div>
            </el-form-item>
          </div>
          <!-- 计费规则 -->
          <div v-else-if="addForm.chargeType==='partition'">
            <span style="display: block;">计费规则</span>
            <div style="width: 100%;display: flex;justify-content: space-between;margin-bottom: 10px;">
              <el-form-item prop="partitionFrameTime" style="width: 35%;">
                <el-input v-model="addForm.partitionFrameTime" type="text" style="width:100%;margin-right: 5px;" placeholder="请输入" />
              </el-form-item>
              <span style="margin-right: 5px;">小时内，每小时收费</span>
              <el-form-item prop="partitionFramePrice" style="width: 35%;">
                <el-input v-model="addForm.partitionFramePrice" type="text" style="width:100%;margin-right: 5px;" placeholder="请输入" />
              </el-form-item>
              <span>元</span>
            </div>
            <div style="width: 100%;display: flex;justify-content: space-between;">
              <span style="margin-right: 5px;">每增加</span>
              <el-form-item prop="partitionIncreaseTime" style="width: 30%;">
                <el-input v-model="addForm.partitionIncreaseTime" type="text" style="width:100%;margin-right: 5px;" placeholder="请输入" />
              </el-form-item>
              <span style="margin-right: 5px;">小时内，每小时收费</span>
              <el-form-item prop="partitionIncreasePrice" style="width: 30%;">
                <el-input v-model="addForm.partitionIncreasePrice" type="text" style="width:100%;margin-right: 5px;" placeholder="请输入" />
              </el-form-item>
              <span>元</span>
            </div>
          </div>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getList, delList, addSubmitApi, editListApi, editSubmitApi } from '@/api/CarRule'
export default {
  name: 'Building',
  data() {
    return {
      title1: '计费',
      // 配置项
      json_fields: { // 导出对应表格头部以及数据
        'id': 'id',
        '计费规则编号': 'ruleNumber',
        '计费规则名称': 'ruleName',
        '免费时长(分钟)': 'freeDuration',
        '收费上线(元)': 'chargeCeiling',
        '计费规则': 'ruleNameView'
      },
      ruleList: [],
      params: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      dialogVisible: false,
      addForm: {
        id: '',
        ruleNumber: '',
        ruleName: '',
        chargeType: 'duration',
        chargeCeiling: '',
        freeDuration: '',
        durationTime: '',
        durationPrice: '',
        durationType: '',
        turnPrice: '',
        partitionFrameTime: '',
        partitionFramePrice: '',
        partitionIncreaseTime: '',
        partitionIncreasePrice: ''
      },
      rules: {
        ruleNumber: [{ required: true, message: '请输入', trigger: 'blur' }],
        ruleName: [{ required: true, message: '请输入', trigger: 'blur' }],
        chargeType: [{ required: true, message: '请输入', trigger: 'blur' }],
        chargeCeiling: [{ required: true, message: '请输入', trigger: 'blur' }],
        freeDuration: [{ required: true, message: '请输入', trigger: 'blur' }],
        durationTime: [{ required: true, message: '请输入', trigger: 'blur' }],
        durationPrice: [{ required: true, message: '请输入', trigger: 'blur' }],
        durationType: [{ required: true, message: '请输入', trigger: 'blur' }],
        turnPrice: [{ required: true, message: '请输入', trigger: 'blur' }],
        partitionFrameTime: [{ required: true, message: '请输入', trigger: 'blur' }],
        partitionFramePrice: [{ required: true, message: '请输入', trigger: 'blur' }],
        partitionIncreaseTime: [{ required: true, message: '请输入', trigger: 'blur' }],
        partitionIncreasePrice: [{ required: true, message: '请输入', trigger: 'blur' }]

      },
      timeList: [
        { text: 'minute', name: '分钟' },
        { text: 'hour', name: '小时' }
      ],
      type: ''
    }
  },
  computed: {
    title() {
      if (this.type === 'add') {
        return '添加'
      } else {
        return '编辑'
      }
    }
  },
  created() {
    this.getListA()
  },
  methods: {
    // 枚举
    chargetypeList(type) {
      const TYPE = {
        'duration': '时长收费',
        'turn': '按次收费',
        'partition': '分段收费'
      }
      return TYPE[type]
    },
    // 点击编辑打开
    async editOpen(type, id) {
      const res = await editListApi(id)
      this.addForm = res.data
      this.dialogVisible = true
      this.type = type
    },
    // 点击确定
    async submit() {
      try {
        this.$refs.addForm.validate()
        if (this.type === 'add') {
          await addSubmitApi(this.addForm)
          this.$message.success('添加成功')
        } else {
          await editSubmitApi(this.addForm)
          this.$message.success('编辑成功')
        }
        this.closeDialog()
        this.getListA()
      } catch (error) {
        console.log('添加', error)
      }
    },
    // 计时器改变
    handleChange(val) {
      this.addForm.durationTime = val
    },
    // 点击就会关闭
    closeDialog() {
      this.dialogVisible = false
      this.$refs.addForm.resetFields()
    },
    async getListA() {
      const res = await getList(this.params)
      console.log(res)
      this.ruleList = res.data.rows
    },
    // 点击打开
    openDialog(type) {
      this.dialogVisible = true
      this.type = type
    },
    // 删除
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delList(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getListA()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.rule-container {
  padding: 20px;
  background-color: #fff;
}

.rules .el-form-item {
  padding: 0 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}
</style>
